{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">  
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/table.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/modal.css?v=1">
	<link rel="stylesheet" href="{{ javascript_path }}libs/CLEditor/jquery.cleditor.css">
	<link rel="stylesheet" href="{{ javascript_path }}libs/formvalidator/developr.validationEngine.css">
    
    <!-- DataTables -->
	<link rel="stylesheet" href="{{ javascript_path }}libs/DataTables/jquery.dataTables.css?v=1">
{% endblock %}
{% block content_title %}{{ page.page_name }} {% endblock %}
{% block content %}

		<div class="with-padding">
        <form action="{{ cms_uri }}/pages/edit/{{ page.page_id }}" method="post" class="validateform">
        <input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />

        <!-- Wrapper, set tabs style class here -->
            <div class="side-tabs">
            
                <!-- Tabs -->
                <ul class="tabs">
                    <li class="active"><a href="#tab-1">General</a></li>
                    {% for language in languages %}
                    {% if language.enabled %}
                    <li><a href="#tab-{{ language.name }}">{{ language.name|capitalize }}</a></li>
                    {% endif %}
                    {% endfor %}
                    
                </ul>
            
                <!-- Content -->
                <div class="tabs-content">
            
                    <div id="tab-1" class="with-padding">
                        <div class="columns">
                            <!-- Second row -->
                            <div class="twelve-columns">
                                <fieldset class="fieldset">
                                    <legend class="legend">Information</legend>
                                    <div class="field-block button-height">
                                        <label class="label"><b>URL:</b></label>
                                        <p>{{ site_url(route) }}</p>
                                    </div>  
                                    <div class="field-block button-height">
                                        <label class="label"><b>Preview:</b></label>
                                        <p><a href="{{ site_url(route) }}" target="_blank">Open in new tab</a></p>
                                    </div>  
                                          
                                </fieldset> 
                            </div>
                                
                            <!-- First row -->
                            <div class="new-row five-columns">
                                <fieldset class="fieldset">
                                    <legend class="legend">Data</legend>
                                    <p class="button-height block-label">
                                        <label for="page_name" class="label">
                                            <small>{{ site_url() }}<span class="red page_name_slug">PAGE_NAME</span></small>
                                            <span class="red">Page name</span>
                                        </label>
                                        <input type="text" name="page_name" id="page_name" class="input full-width validate[required,custom[onlyLetterNumberSp]]" value="{{ page.page_name }}">
                                    </p> 
                                    
                                    <p class="button-height block-label">
                                        <label for="page_parent" class="label">
                                            <small>{{ site_url() }}<span class="green page_parent_slug">PARENT_NAME</span>/<span class="red page_name_slug">PAGE_NAME</span></small>
                                            <span class="green">Parent</span>
                                        </label>
                                        <select name="page_parent" id="page_parent" class="select expandable-list" style="width:100%">
                                            <option value="0"></option>
                                            {% for pages in pages_options_list %}
                                                <option value="{{ pages.id }}" {% if pages.id == page.page_parent %} selected="selected" {% endif %}>{{ pages.name }}</option>
                                            {% endfor %}                    
                                        </select>
                                    </p> 
                                    
                                    <p class="button-height block-label">
                                        <label for="layout" class="label">
                                            Layout
                                        </label>                
                                        <select class="select expandable-list" id="layout" name="layout" style="width:100%">
                                            {% for layout in layouts %}
                                            <option value="{{ layout.name }}" {% if layout.name == page.layout %}selected="selected"{% endif %}>{{ layout.name|capitalize }}</option>
                                            {% endfor %}
                                            
                                        </select>
                                    </p> 
                                    
                                       
                                </fieldset> 
                            </div>
                            
                            <div class="seven-columns">
                                <fieldset class="fieldset">
                                    <legend class="legend">Widgets</legend>
                                    <div id="widgets_output">
                                    {% for area in widget_areas %}
                                    <div class="field-block button-height">
                                        <label for="{{ area }}" class="label"><b>{{ area }}</b></label>
                                        <select class="select expandable-list" style="width:100%" name="{{ area }}" id="{{ area }}">
                                            <option></option>
                                            {% for widget in widgets %}
                                            {% if widget.used and widget.area == area %}
                                            <option value="{{ widget.id}}" selected="selected">{{ widget.name }}</option>
                                            {% else %}
                                            <option value="{{ widget.id }}">{{ widget.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                            
                                        </select>
                                    </div>      
                                    {% endfor %} 
                                    </div>
                                </fieldset> 
                            </div>
                            <!-- Second row -->
                            <div class="new-row twelve-columns">
                                <fieldset class="fieldset">
                                    <legend class="legend">Translations</legend>
                                    <div class="field-block button-height">
                                        <label for="languages" class="label"><b>Enable translations:</b></label>
                                        <span class="button-group">        
                                            {% for language in languages %}
                                            <label for="lang_{{ language.name }}" class="button green-active">
                                                <input type="checkbox" name="languages[]" id="lang_{{ language.name }}" value="{{ language.name }}" {% if language.enabled %}checked{% endif %}>
                                                {{ language.name|capitalize  }} {% if language == config_item('site_default_language') %}(default){% endif %}
                                            </label>    
                                            {% endfor %}                     
                                        </span>                
                                    </div>        
                                </fieldset> 
                            </div>
                        </div>
                    </div> <!-- Tab 1 -->
 
                    {% for content in contents %}
                    <div id="tab-{{ content.language }}" class="with-padding">
                    	<h3>{{ content.language|capitalize }}</h3>
                        <fieldset class="fieldset">
                            <legend class="legend">Search engine optimisation</legend>
                            <div class="field-block button-height">
                                <label for="{{ content.language }}_seo_keywords" class="label"><b>Keywords</b></label>
                                <input type="text" name="{{ content.language }}_seo_keywords" id="{{ content.language }}_seo_keywords" class="input full-width" value="{{ content.seo_keywords }}">
                            </div>  
                            <div class="field-block button-height">
                                <label for="{{ content.language }}_seo_description" class="label"><b>Description</b></label>
                            	<textarea name="{{ content.language }}_seo_description" id="{{ content.language }}_seo_description"  class="input full-width">{{ content.seo_description }}</textarea>
                            </div>  
                                  
                        </fieldset> 
                        
                        <fieldset class="fieldset">
                            <legend class="legend">Page content</legend>
                            <textarea class="cleditor" name="{{ content.language }}_content">{{ content.page_content }}</textarea>
                                  
                        </fieldset>              
                    </div>                     
                    {% endfor %}
                    
                               

                 
            
           		</div>
            
            </div>
            <br />
            <fieldset class="fieldset">
                <button type="submit" class="button huge full-width">Save</button>
            
            </fieldset>
            </form>
        </div>
        
{% endblock %}
{% block javascripts %}

	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}developr.table.js"></script>
	<script src="{{ javascript_path }}developr.tabs.js"></script>
	<script src="{{ javascript_path }}developr.confirm.js"></script>

	<script src="{{ javascript_path }}developr.modal.js"></script>
	<script src="{{ javascript_path }}libs/formvalidator/jquery.validationEngine.js"></script>
	<script src="{{ javascript_path }}libs/formvalidator/languages/jquery.validationEngine-en.js"></script>
    


	<!-- Plugins -->
	<script src="{{ javascript_path }}libs/jquery.tablesorter.min.js"></script>
	<script src="{{ javascript_path }}libs/DataTables/jquery.dataTables.min.js"></script>
	<script src="{{ javascript_path }}libs/CLEditor/jquery.cleditor.min.js"></script>
	<script src="{{ javascript_path }}radicms.slug.js"></script>
    <script>
	$(document).ready(function(){
		$(".validateform").validationEngine();
	   });
	</script>
    <script>

		// Call template init (optional, but faster if called manually)
		$.template.init();
		// Init
		var editorTextarea = $('.cleditor'),
			editorWrapper = editorTextarea.parent(),
			editor = editorTextarea.cleditor({
				width:	'100%',
				height:	350
			})[0];
		
		// Update size when resizing
		editorWrapper.sizechange(function()
		{
			editor.refresh();
		});
		
		jQuery(document).ready( function() {
	
			$('.page_name_slug').RadiCMS_Slug({
				input: '#page_name'
			});
			
			$('.page_parent_slug').RadiCMS_Slug({
				input: '#page_parent'
			});
			
		});
		$('#layout').change(function(e) {
            e.preventDefault();
			var layout = $('#layout option:selected').val();
			var output = $('#widgets_output');
			output.html('<p class=" align-center"><span class="loader huge"></span></p>');
			$.ajax({
				dataType:"json",
				type:"POST",
				url:"{{ cms_uri }}/pages/get_layout_widgets/" + layout,
				success: function(data)
				{
					if(data.success)
					{
						output.html('');
						for(var area in data.areas)
						{
							
							var block = $(document.createElement('div'));
							var label = $(document.createElement('label'));
							var select = $(document.createElement('select'));
							
							block.append(label)
								 .append(select);
						 	output.append(block);
							
							block.addClass('field-block').addClass('button-height');
							label.addClass('label');
							label.html('<b>' + data.areas[area] + '</b>');
							label.attr('for', data.areas[area]);
							select.addClass('select').addClass('expandable-list');
							select.css('width', '100%');
							select.attr('name', data.areas[area]);
							select.attr('id', data.areas[area]);							
							select.html('<option></option>');
							for(var widget in data.widgets)
							{
								select.append('<option value="' + data.widgets[widget].name + '">' + data.widgets[widget].data.name + '</option>');
							}
							
						}
						notify('Layout change', 'New layout selected, widget areas updated',{
							icon: '{{ image_path }}demo/picto.png',
							showCloseOnHover: false
						});
					}
					else
					{
						notify('Error', 'The permission has not been changed',{
							icon: '{{ image_path }}demo/picto.png',
							showCloseOnHover: false,
							groupSimilar: false
						});
					}
				}
			});
        });

	</script>
{% endblock %}

</body>
</html>